<template>
	<view class="page-container">
		<scroll-view class="scroll-wrapper" scroll-y>
			<!-- 个人信息头部 -->
			<view class="profile-header">
				<view class="profile-photo">
					<view class="photo-placeholder">{{basicInfo.name[0]}}</view>
				</view>
				<view class="profile-info">
					<view class="name">{{basicInfo.name}}</view>
					<view class="profession">{{basicInfo.intendedJob}}</view>
					<view class="contact-details">
						<view class="contact-item">
							<view class="contact-icon">📱</view>
							<view class="contact-text">{{basicInfo.phone}}</view>
						</view>
						<view class="contact-item">
							<view class="contact-icon">✉️</view>
							<view class="contact-text">{{basicInfo.email}}</view>
						</view>
						<view class="contact-item">
							<view class="contact-icon">📍</view>
							<view class="contact-text">{{basicInfo.expectedLocation}}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 内容区域 -->
			<view class="content-wrapper">
				<!-- 基本信息 -->
				<view class="section">
					<view class="section-header">
						<view class="section-icon">👤</view>
						<view class="section-title">基本信息</view>
					</view>
					<view class="basic-info-grid">
						<view class="info-card">
							<view class="info-label">性别</view>
							<view class="info-value">{{basicInfo.gender}}</view>
						</view>
						<view class="info-card">
							<view class="info-label">年龄</view>
							<view class="info-value">{{basicInfo.age}}</view>
						</view>
						<view class="info-card">
							<view class="info-label">学历</view>
							<view class="info-value">{{basicInfo.education}}</view>
						</view>
						<view class="info-card">
							<view class="info-label">毕业院校</view>
							<view class="info-value">{{basicInfo.schoolGraduation}}</view>
						</view>
						<view class="info-card">
							<view class="info-label">专业</view>
							<view class="info-value">{{basicInfo.major}}</view>
						</view>
						<view class="info-card">
							<view class="info-label">工作年限</view>
							<view class="info-value">{{basicInfo.workYears}}</view>
						</view>
					</view>
				</view>

				<!-- 求职意向 -->
				<view class="section">
					<view class="section-header">
						<view class="section-icon">🎯</view>
						<view class="section-title">求职意向</view>
					</view>
					<view class="intention-card">
						<view class="intention-row">
							<view class="intention-label">意向职位</view>
							<view class="intention-value">{{basicInfo.intendedJob}}</view>
						</view>
						<view class="intention-row">
							<view class="intention-label">期望工作地点</view>
							<view class="intention-value">{{basicInfo.expectedLocation}}</view>
						</view>
						<view class="intention-row">
							<view class="intention-label">期望薪资</view>
							<view class="intention-value">{{basicInfo.expectedSalary}}</view>
						</view>
						<view class="intention-row">
							<view class="intention-label">到岗时间</view>
							<view class="intention-value">{{basicInfo.availableTime}}</view>
						</view>
						<view class="intention-row">
							<view class="intention-label">期望行业</view>
							<view class="intention-value">{{basicInfo.expectedIndustry}}</view>
						</view>
					</view>
				</view>

				<!-- 个人技能 -->
				<view class="section">
					<view class="section-header">
						<view class="section-icon">💻</view>
						<view class="section-title">个人技能</view>
					</view>

					<view class="skills-container">
						<view class="skill-category" v-for="(item , index) in mySkill" :key="index">
							<view class="skill-category-title">{{item.className}}</view>
							<view class="skill-tags">
								<view class="skill-tag" v-for="(row , inx) in item.children" :key="inx">
									<view class="skill-name">{{row.skillName}}</view>
									<view class="skill-desc">{{row.remark}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 个人评价 -->
				<view class="section">
					<view class="section-header">
						<view class="section-icon">🌟</view>
						<view class="section-title">个人评价</view>
					</view>
					<view class="evaluation-card">
						<view class="evaluation-text">
							{{basicInfo.personalEvaluation}}
						</view>
					</view>
				</view>

				<!-- 工作经历 -->
				<view class="section">
					<view class="section-header">
						<view class="section-icon">📊</view>
						<view class="section-title">工作经历</view>
					</view>

					<view class="experience-list">
						<!-- 工作经历1 -->
						<view class="experience-card" v-for="(item , index) in workExperienceList" :key="index">
							<view class="experience-header">
								<view class="experience-company">{{item.company}}</view>
								<view class="experience-period">{{item.startDate}} - {{item.endDate}}</view>
							</view>
							<view class="experience-position">{{item.position}}</view>
							<view class="experience-description">
								{{item.description}}
							</view>
							<view class="experience-achievements">
								<view class="achievement-item" v-for="(row, inx) in item.accomplishments" :key="inx">
									• {{row}}
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 项目经历 -->
				<view class="section">
					<view class="section-header">
						<view class="section-icon">🚀</view>
						<view class="section-title">项目经历</view>
					</view>

					<!-- 平台类型标签 -->
					<view class="platform-tags">
						<view class="platform-tag" :class="item.name == projectTypeName ? 'platform-tagActive' : ''"
							v-for="(item , index) in projectTypeList" :key="index" @click="changeProjectType(item)">
							{{item.name}}</view>
					</view>

					<view class="project-list">
						<view class="project-card" v-for="(item, index) in projectList" :key="index">
							<!-- 项目头部 -->
							<view class="project-header">
								<view class="project-name">
									{{item.projectName}}
									<view class="project-type-badge">{{item.projectTypeName}}</view>
								</view>
							</view>

							<!-- 项目基本信息 -->
							<view class="project-meta">
								<view class="meta-item">
									<view class="meta-icon">🏢</view>
									<view class="meta-text">{{item.wordUnit}}</view>
								</view>
								<view class="meta-item">
									<view class="meta-icon">⏱️</view>
									<view class="meta-text">{{item.projectTime}}</view>
								</view>
							</view>



							<!-- 项目描述 -->
							<view class="project-section">
								<view class="section-subtitle">项目描述</view>
								<view class="project-description">
									{{item.describe || '暂无项目描述'}}
								</view>
							</view>

							<!-- 我的贡献 -->
							<view class="project-section">
								<view class="section-subtitle">我的贡献</view>
								<view class="contributions-list">
									<view class="contribution-item"
										v-for="(line, idx) in formatContributions(item.contribution)" :key="idx">
										<view class="contribution-bullet"></view>
										<view class="contribution-text">{{line}}</view>
									</view>
									<view class="no-contributions" v-if="!item.contribution">
										暂无贡献记录
									</view>
								</view>
							</view>

							<!-- 访问地址 - 添加了复制功能 -->
							<view class="project-section" v-if="item.projectUrl">
								<view class="section-subtitle">访问地址</view>
								<view class="url-container">
									<view class="contribution-text url-text">
										{{item.projectUrl}}
									</view>
									<view class="copy-icon" @click="copyToClipboard(item.projectUrl)"
										:class="{ copied: copiedUrl === item.projectUrl }">
										{{ copiedUrl === item.projectUrl ? '✓' : '📋' }}
										<view class="copy-tooltip" v-if="copiedUrl === item.projectUrl">
											已复制
										</view>
									</view>
								</view>
							</view>

							<!-- 项目展示 -->
							<view class="project-section" v-if="item.images && item.images.length">
								<view class="section-subtitle">项目展示</view>
								<view class="project-images">
									<view class="project-image" v-for="(img, imgIdx) in item.images" :key="imgIdx"
										@click="previewImage(item.images, imgIdx)">
										<image :src="img.url" mode="aspectFill" :alt="'项目图片 ' + (imgIdx + 1)"></image>
									</view>
								</view>
							</view>
						</view>

						<!-- 无项目时显示 -->
						<view class="empty-projects" v-if="projectList.length === 0">
							<view class="empty-icon">📁</view>
							<view class="empty-text">暂无项目经历</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				basicInfo: {},
				mySkill: [],
				projectList: [],
				workExperienceList: [],
				copiedUrl: null,
				projectTypeList: [],
				projectTypeName: '',
				
				maxCount:5, //最大失败次数
				getBasicInfoCount:0,
				getMySkillCount:0,
				getWorkExperienceCount:0,
				getProjectCount:0,
				getProjectTypeCount:0
			};
		},

		onLoad() {
			this.getBasicInfo()
			this.getMySkill()
			this.getProject()
			this.getWorkExperience()
			this.getProjectType()
		},
		
		methods: {
			// 获取个人信息
			async getBasicInfo() {
				try{
					let result = await this.$axios('overallSituation', {
						state: 'look',
						databaseName: "resumeDetail",
					} , true)
					if (result.code == 200) {
						this.basicInfo = result.data[0] || {}
					}
				}catch(e){
					console.log("请求失败了");
					if(this.getBasicInfoCount <= this.maxCount){
						this.getBasicInfo()
					}
					this.getBasicInfoCount++
				}
			},

			// 获取我的技能
			async getMySkill() {
				try{
					let result = await this.$axios('mySkill', {
						queryId: '66794a7555b3372a1f80e1e1'
					}, true)
					if (result.code == 200) {
						this.mySkill = result.data || []
					}
				}catch(e){
					if(this.getMySkillCount <= this.maxCount){
						this.getMySkill()
					}
					this.getMySkillCount++
				}
			},

			// 获取工作经历
			async getWorkExperience() {
				try{
					const parmse = {
						databaseName: 'workExperience',
						queryId: '66794a7555b3372a1f80e1e1',
						state: 'look'
					};
					
					let res = await this.$axios('overallSituation', parmse , true)
					if (res.code == 200) {
						this.workExperienceList = res.data || []
					}
				}catch(e){
					if(this.getWorkExperienceCount <= this.maxCount){
						this.getWorkExperience()
					}
					this.getWorkExperienceCount++
				}
			},

			// 获取项目经历
			async getProject() {
				try{
					let parmse = {
						state: 'look',
						databaseName: "projectList",
						queryId: '66794a7555b3372a1f80e1e1',
						projectTypeName: this.projectTypeName
					};
					let result = await this.$axios('overallSituation', parmse , true);
					this.projectList = result.data || [];
				}catch(e){
					if(this.getProjectCount <= this.maxCount){
						this.getProject()
					}
					this.getProjectCount++
				}
			},

			// 获取项目类型
			async getProjectType() {
				try{
					let result = await this.$axios('overallSituation', {
						databaseName: 'dataDictionaryDetail',
						state: 'look',
						identification: 'xmlx',
					});
					
					if (result.code == 200) {
						this.projectTypeList = result.data || [];
						console.log(this.projectTypeList, 'this.projectTypeList ');
					}
				}catch(e){
					if(this.getProjectTypeCount <= this.maxCount){
						this.getProjectType()
					}
					this.getProjectTypeCount++
				}
			},

			// 点击项目类型
			changeProjectType(item) {
				if (this.projectTypeName == item.name) {
					this.projectTypeName = ''
				} else {
					this.projectTypeName = item.name
				}
				this.getProject()
			},

			// 格式化贡献内容，按换行符分割
			formatContributions(contribution) {
				if (!contribution) return [];
				return contribution.split('\n').filter(line => line.trim() !== '');
			},

			// 预览项目图片
			previewImage(images, index) {
				uni.previewImage({
					urls: images.map(img => img.url),
					current: index
				});
			},

			// 复制到剪贴板功能
			copyToClipboard(text) {
				let _this = this
				uni.setClipboardData({
					data: text,
					success: function() {
						_this.copiedUrl = text
						_this.$showToast('复制成功')
					},
					fail: function(err) {
						_this.$showToast('复制失败')
					}
				});
			}
		}
	};
</script>

<style scoped>
	/* 基础样式 */
	.page-container {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		background-color: #f8fafc;
		color: #334155;
		min-height: 100vh;
	}

	.scroll-wrapper {
		width: 100%;
		height: 100vh;
	}

	/* 头部信息样式 */
	.profile-header {
		background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
		padding: 30rpx 20rpx;
		color: white;
		display: flex;
		align-items: center;
	}

	.profile-photo {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.2);
		margin-right: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.photo-placeholder {
		font-size: 48rpx;
		font-weight: bold;
	}

	.name {
		font-size: 36rpx;
		font-weight: 700;
		margin-bottom: 8rpx;
	}

	.profession {
		font-size: 24rpx;
		opacity: 0.9;
		margin-bottom: 15rpx;
	}

	.contact-details {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.contact-item {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		opacity: 0.95;
	}

	.contact-icon {
		margin-right: 10rpx;
		width: 24rpx;
		text-align: center;
	}

	/* 内容区域样式 */
	.content-wrapper {
		padding: 25rpx;
	}

	.section {
		margin-bottom: 35rpx;
	}

	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-icon {
		font-size: 28rpx;
		margin-right: 12rpx;
		width: 36rpx;
		height: 36rpx;
		background-color: #eff6ff;
		color: #3b82f6;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #1e293b;
	}

	/* 基本信息样式 */
	.basic-info-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15rpx;
	}

	.info-card {
		background-color: white;
		border-radius: 12rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.info-label {
		font-size: 20rpx;
		color: #64748b;
		margin-bottom: 5rpx;
	}

	.info-value {
		font-size: 24rpx;
		font-weight: 500;
		color: #1e293b;
	}

	/* 求职意向样式 */
	.intention-card {
		background-color: white;
		border-radius: 12rpx;
		padding: 25rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.intention-row {
		display: flex;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f1f5f9;
	}

	.intention-row:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}

	.intention-label {
		font-size: 22rpx;
		font-weight: 500;
		color: #334155;
		min-width: 160rpx;
	}

	.intention-value {
		font-size: 22rpx;
		color: #64748b;
		flex: 1;
	}

	/* 技能样式 */
	.skills-container {
		background-color: white;
		border-radius: 12rpx;
		padding: 25rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.skill-category {
		margin-bottom: 25rpx;
	}

	.skill-category:last-child {
		margin-bottom: 0;
	}

	.skill-category-title {
		font-size: 24rpx;
		font-weight: 600;
		margin-bottom: 15rpx;
		color: #1e293b;
	}

	.skill-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
	}

	.skill-tag {
		background-color: #eff6ff;
		border-radius: 8rpx;
		padding: 12rpx 18rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.skill-name {
		font-size: 22rpx;
		font-weight: 500;
		color: #3b82f6;
		margin-bottom: 5rpx;
	}

	.skill-desc {
		font-size: 20rpx;
		color: #64748b;
	}

	/* 个人评价样式 */
	.evaluation-card {
		background-color: white;
		border-radius: 12rpx;
		padding: 25rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.evaluation-text {
		font-size: 22rpx;
		line-height: 1.7;
		color: #475569;
		white-space: pre-wrap;
		word-wrap: break-word;
	}

	/* 工作经历样式 */
	.experience-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.experience-card {
		background-color: white;
		border-radius: 12rpx;
		padding: 25rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.experience-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.experience-company {
		font-size: 24rpx;
		font-weight: 600;
		color: #1e293b;
	}

	.experience-period {
		font-size: 20rpx;
		color: #94a3b8;
	}

	.experience-position {
		font-size: 22rpx;
		color: #3b82f6;
		font-weight: 500;
		margin-bottom: 15rpx;
	}

	.experience-description {
		font-size: 22rpx;
		color: #475569;
		margin-bottom: 15rpx;
		line-height: 1.6;
	}

	.experience-achievements {
		padding-left: 24rpx;
	}

	.achievement-item {
		font-size: 20rpx;
		color: #64748b;
		margin-bottom: 10rpx;
		line-height: 1.6;
	}

	/* 项目经历样式 */
	.project-list {
		display: flex;
		flex-direction: column;
		gap: 25rpx;
	}

	.project-card {
		background-color: white;
		border-radius: 12rpx;
		padding: 25rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
		border-left: 4rpx solid #3b82f6;
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.project-card:hover {
		transform: translateY(-3rpx);
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	/* 平台类型标签样式 */
	.platform-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		margin-bottom: 20rpx;
		padding: 10rpx 0;
	}

	.platform-tag {
		font-size: 20rpx;
		padding: 5rpx 15rpx;
		background-color: #f1f5f9;
		color: #64748b;
		border-radius: 20rpx;
		border: 1rpx solid #e2e8f0;
	}

	.platform-tagActive {
		color: #fff;
		background-color: #10b981;
	}

	/* 项目头部 */
	.project-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.project-name {
		font-size: 26rpx;
		font-weight: 600;
		color: #1e293b;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 10rpx;
	}

	.project-type-badge {
		font-size: 18rpx;
		padding: 3rpx 10rpx;
		background-color: #eff6ff;
		color: #3b82f6;
		border-radius: 20rpx;
		margin-top: 3rpx;
	}

	.project-period {
		font-size: 20rpx;
		color: #64748b;
		background-color: #f8fafc;
		padding: 5rpx 12rpx;
		border-radius: 20rpx;
	}

	/* 项目元信息 */
	.project-meta {
		display: flex;
		gap: 20rpx;
		margin-bottom: 20rpx;
		flex-wrap: wrap;
	}

	.meta-item {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		color: #64748b;
		background-color: #f8fafc;
		padding: 6rpx 15rpx;
		border-radius: 6rpx;
	}

	.meta-icon {
		margin-right: 8rpx;
		width: 22rpx;
		text-align: center;
	}

	/* 项目各部分内容 */
	.project-section {
		margin-bottom: 25rpx;
	}

	.project-section:last-child {
		margin-bottom: 0;
	}

	.section-subtitle {
		font-size: 22rpx;
		font-weight: 600;
		color: #3b82f6;
		margin-bottom: 12rpx;
		display: flex;
		align-items: center;
	}

	.section-subtitle::before {
		content: "";
		display: inline-block;
		width: 6rpx;
		height: 6rpx;
		border-radius: 50%;
		background-color: #3b82f6;
		margin-right: 8rpx;
	}

	.project-description {
		font-size: 22rpx;
		color: #475569;
		line-height: 1.7;
		background-color: #f8fafc;
		padding: 15rpx;
		border-radius: 8rpx;
	}

	/* 贡献列表 */
	.contributions-list {
		padding-left: 5rpx;
	}

	.contribution-item {
		display: flex;
		margin-bottom: 15rpx;
		line-height: 1.7;
	}

	.contribution-item:last-child {
		margin-bottom: 0;
	}

	.contribution-bullet {
		width: 6rpx;
		height: 6rpx;
		border-radius: 50%;
		background-color: #3b82f6;
		margin-top: 16rpx;
		margin-right: 12rpx;
		flex-shrink: 0;
	}

	.contribution-text {
		font-size: 22rpx;
		color: #64748b;
	}

	.no-contributions {
		font-size: 20rpx;
		color: #94a3b8;
		padding: 10rpx 0;
	}

	/* 访问地址和复制功能样式 */
	.url-container {
		display: flex;
		align-items: center;
		background-color: #f8fafc;
		padding: 15rpx;
		border-radius: 8rpx;
	}

	.url-text {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.copy-icon {
		font-size: 24rpx;
		margin-left: 15rpx;
		color: #3b82f6;
		cursor: pointer;
		padding: 5rpx;
		position: relative;
	}

	.copy-icon:hover {
		color: #2563eb;
	}

	.copy-icon.copied {
		color: #10b981;
	}

	.copy-tooltip {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		background-color: #10b981;
		color: white;
		font-size: 18rpx;
		padding: 3rpx 10rpx;
		border-radius: 4rpx;
		white-space: nowrap;
	}

	/* 项目图片展示 */
	.project-images {
		display: flex;
		gap: 10rpx;
		overflow-x: auto;
		padding-bottom: 10rpx;
	}

	.project-image {
		width: 160rpx;
		height: 120rpx;
		border-radius: 8rpx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.project-image image {
		width: 100%;
		height: 100%;
		transition: transform 0.3s;
	}

	.project-image:hover image {
		transform: scale(1.05);
	}

	/* 无项目时的样式 */
	.empty-projects {
		background-color: white;
		border-radius: 12rpx;
		padding: 50rpx 25rpx;
		text-align: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.empty-icon {
		font-size: 50rpx;
		color: #cbd5e1;
		margin-bottom: 15rpx;
	}

	.empty-text {
		font-size: 22rpx;
		color: #94a3b8;
	}

	/* 页脚留白 */
	.footer-space {
		height: 30rpx;
	}
</style>